<template>
	<!-- 发布文章 -->
	<view>
		<view class="article_top">
			<input v-model="newsform.title" type="text" maxlength="35" class="article_tltle" placeholder="添加主标题,最多35个字" />
		</view>
		
		<view class="zupus_item  ">
			<view style="display: flex; justify-content: space-between; align-items:center;margin-top: 15rpx;margin-left: 10rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">
					筹款金额
				</view>
				<view class="">
					<input  v-model="newsform.goal_money"  type="number" maxlength="9" class="article_tltle" style="border: 2rpx solid #999; border-radius: 15rpx; " />
		
				</view>
			</view>
		</view>	
		
	<!-- 	<view class="zupus_item  ">
			<view style="display: flex; justify-content: space-between; align-items:center;margin-top: 15rpx;margin-left: 10rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">
					设置结束时间
				</view>
				<view class="">
					<switch  @change="switch1Change" />
				</view>
			</view>
			<view class="" style="display: flex; justify-content: space-between; align-items:center;margin-top: 15rpx;margin-left: 10rpx;" v-if="newsform.time_tyep">
				<view style="font-size: 35rpx;font-weight: bold;">
					选择结束时间
				</view>
				<view class="">
					<picker mode="date" :value="newsform.endtime" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{newsform.endtime}}</view>
					</picker>
				</view>
			</view>
		</view>	 -->
		
		
		<xiaEditor value="" placeholder="" @editorChange="getHtml"></xiaEditor>
		
		<view >
			<view class="add_cover_view" style="display: flex;  flex-wrap:wrap;">
				<view class="thumbnail_view" v-if="newsform.imger_url" v-for="(item2,index2) in imgurl " :key="index2" >
					<image class="imgthumb" :src="photo_cdn+item2" mode=""></image>
				</view>
			</view>
			
			<view  class="add_cover" @tap="uploadimg">
				<image class="cover_img" :src="photo_cdn + 'zpupload/static/img/camera.png'"></image>
				<view class="cover_title">添加封面</view>
			</view>
		</view>
		<view class="submit_send" @tap="submitfun">
			<view class="sendbtnss">发布捐赠</view>
		</view>
	</view>
</template>

<script>
	import {getDonationList,getDonationByInfo,carateDonation , updateDonation} from "@/utils/api/zupu.js" 
	import xiaEditor from '@/components/xia-editor/xia-editor.vue'
	import {createArticle} from "@/utils/api/zuzhi.js";
	import config from "@/utils/config.js";
	let {uploadFile,photo_cdn} = config.baseUrl;
	export default {
		components: {
			xiaEditor
		},
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				photo_cdn,
				newsform:{
					title:"",
					family_id:null,
					time_tyep:false,
					end_time:currentDate,
					content:'',
					imger_url:'',
					goal_money:1
				},
				imgurl:[]
			}
		},
		onLoad(Option) {
			console.log(Option.id)
			this.newsform.family_id = Option.id;
		},
		methods: {
			 bindTimeChange: function(e) {
			    this.newsform.end_time = e.detail.value
			},
			switch1Change(e){
				console.log(e.detail.value)
				this.newsform.time_tyep = e.detail.value;
			},
			//得到的富文本 change
			getHtml(e){
				console.info(e);
				this.newsform.content = e;
			},
			//上传图片
			uploadimg(){
				
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					success: (e) => {
						uni.uploadFile({
						    url: uploadFile, 
						    filePath: e.tempFilePaths[0],
						    name: 'file',
							header:{
								'token':uni.getStorageSync("token"),
							},
						    formData: {
						       "Content-Type": "multipart/form-data",
						       water: 0
						    },
						    success: (res) => {
								let {data} = JSON.parse(res.data)
								console.log('多选',data);
								// data.url
								this.imgurl.push(data.url)
								this.newsform.imger_url += data.url+',';
								console.log(this.imgurl)
								console.log(this.newsform)
						    },
							fail: (err) => {
								this.$api.msg("上传图片失败");
							}
						});
					}
				});
			},
			submitfun(){
				let {newsform} = this;
				if(!newsform.title){
					this.$api.msg("请输入标题!");
					return false;
				}
				
				if(!newsform.content){
					this.$api.msg("请输入内容!");
					return false;
				}
				
				if(!newsform.goal_money){
					this.$api.msg("请输入金额!");
					return false;
				}
				
				if(!newsform.imger_url){
					this.$api.msg("请输入上传缩略图!");
					return false;
				}
				
				carateDonation(this.newsform,).then(res=>{
					console.info("res",res);
					if(res.code==1){
						this.$api.msg("提交成功!");
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else{
						this.$api.msg(res.msg);
					}
				})
			},
			 getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style lang="scss">
	.zupus_item{
		// padding: 18rpx 25rpx;
		margin-bottom: 20rpx;
		width: 710rpx;
		// height: 256rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		&.active{
			border: $themecolor 2rpx solid;
		}
		.peag{
			position: absolute;
			top: 0;
			right: 30rpx;
			.people_flag{
				width: 50rpx;
				height: 80rpx;			
			}
			.peag_text{
				font-size: 32rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				color: #FFFFFF;
			}
		}
		.itemimgss{
			width: 146rpx;
			height: 220rpx;
			position: relative;
			.family_name{
				z-index: 2;
				position: absolute;
				top: 16rpx;
				left: 98rpx;
				writing-mode: vertical-lr;
				// font-size: 30rpx;
				height: 144rpx;
				text-align: center;
			}
		}
		.zpimgs{
			width: 146rpx;
			height: 220rpx;
			background-size: 100% 100%;
		}
		.zupus_item_info{		
			margin-left: 36rpx;
	
			.zupu_names{
				color: #000000;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 1;
			}
			.fqr_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.rprs_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.create_time{
				margin-top: 40rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.editzp{
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
				position: absolute;
				right: 100rpx;
				top: 30rpx;
			}
			.contactccr{
				color: #FFFFFF;
				background-color: $themecolor;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 14rpx;
			}
			
			
			.item_info_foot{
				margin-top: 16rpx;
				.tximgs{
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
				}
				.inheritors{
					margin-left: 20rpx;
					color: #AE8949;
					font-size: 24rpx;
					.tt_line{
						text-decoration: underline;
					}
				}
				.punumtext{
					margin-left: auto;
					color: #999999;
					font-size: 24rpx;
				}
			}
			
		}
	}
	@import "./create_juanzeng.scss"
</style>